<template>
  <div style="border: 1px solid #ccc; width: 1000px;">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        mode="default"
    />
    <Editor
        style="min-height: 1px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        mode="default"
        @onCreated="handleCreated"
        @onChange="handleChange"
    />
  </div>

</template>

<script setup>
  import '@wangeditor/editor/dist/css/style.css' // 引入 css
  import { onBeforeUnmount, ref, shallowRef, defineEmits } from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

  // setup() {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()
    const emits = defineEmits(['recommended'])

    //工具栏的配置
    const toolbarConfig = {
      // 不需要功能的写下面
      excludeKeys: [
        'blockquote', // 引用
        '|',
        'group-more-style', //下拉菜单
        'color', //颜色
        'bgColor', //背景色
        '|',
        'fontSize', //字号
        'fontFamily', //字体
        'lineHeight', //行高
        '|',
        'todo', //待办
        'group-justify', //对齐
        'group-indent', //缩进
        'emotion', // 表情
        'group-video', //视频
        'insertTable', //表格
        'codeBlock', //代码块
        'divider', //分割线
        'undo', //后退
        'redo', //还原
        'fullScreen' //全屏
      ]
    }

    //编辑器的配置
    const editorConfig = {
      placeholder: '',
      scroll: false,
    }

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })
    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }

    // 内容改变的触发事件
    const handleChange = (editor) => {
      editorRef.value = editor
      emits('recommended',valueHtml)
    }
    // 内容 HTML
    const valueHtml = ref('')

  // }
</script>

<style>

</style>